<template>
  <div class="search-filter mt15 mb10 rounded-8">
    <div class="pl20 pr20">
      <div class="FlexBox mb12">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索题目..."
          @keyup.enter="emit('search', activeCategory, searchQuery)"
          class="search-input mr10 rounded-6"
        />
        <el-button size="default" type="primary" icon="Search" @click="emit('search', activeCategory, searchQuery)"
          >搜索</el-button
        >
        <el-button
          size="default"
          icon="Refresh"
          @click="
            searchQuery = '';
            emit('search', activeCategory, searchQuery);
          "
          >重置</el-button
        >
        <button class="addBtn ml12" @click="emit('addQuestion', 'insert')">
          <FolderAdd style="width: 1.1em; height: 1.1em" /> 添加题目
        </button>
      </div>
      <div class="categories pb2 flex gap-8">
        <button
          v-for="category in categories"
          :key="category.label"
          @click="handleClickTab(category, $event)"
          :class="['category-btn hand rounded-16', { active: category.label === activeCategory }]"
        >
          {{ category.label }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="QuestionSearch">

defineProps<{ categories: SelectOptionType[] }>();
const emit = defineEmits(["search", "addQuestion"]);
const searchQuery = ref("");
const activeCategory = ref("全部");
const handleClickTab = (tab: SelectOptionType, event: PointerEvent) => {
  activeCategory.value = tab.label === activeCategory.value ? "全部" : tab.label;
  emit("search", tab.label, searchQuery.value);
  (event.target as HTMLElement).scrollIntoView({ behavior: "smooth", inline: "center", block: 'nearest' });
};
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
